<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="4" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
 .gray-bg{background:#f5f5f5 }
        .banner{width: 100%}
        .banner img{width: 100%}
        .company-info{margin-top: 50px;padding-bottom: 80px;overflow: hidden}
        .company-info .left{float: left;width: 580px;margin-right: 20px;}
        .company-info h3{color: #c18a3c;font-weight: bold;font-size: 20px;letter-spacing: 3px;}
        .company-info h4{color:#c18a3c;font-size: 16px;margin-top: 12px;font-weight: bold; letter-spacing: 3px;}
        .company-info .right{float: right;}
        .company-info .left .line{width: 115px;height: 1px ;background: #dab75b;margin: 30px 0;}
        .company-info .left p{font-size: 13px;margin-bottom: 30px;}
        .right {width: 535px;  height: 420px; }
        .right img{width: 100%;height: 100%;}
        .service{clear:both;padding-top: 40px;overflow: hidden;padding-bottom: 45px;}
        h3{font-size: 24px;color: #555555}
        .en-tit{position: relative;color:#dab75b ;top:10px;left: 50%;margin-left: -41px;}
        .en-tit .line,.en-tit .line2{position:absolute;top:15px;display:inline-block;height: 1px;width:60px;background: #dab75b }
        .en-tit .line{left: -70px;}
        .en-tit .line2{left: 90px;}
        .service ul{margin-top:50px;margin-bottom: 50px; }
        .service ul li{margin-bottom: 25px;}
         .col-md-3{padding: 0px;width: 210px; }
         .col-md-9{width: 950px;margin-left: 10px; }
        .service ul .img-wrap{width:210px;height:308px;background:#ffffff;}
        .service ul .img-wrap img{width: 100%;}
        .service ul .per-info{background: #ffffff;border-radius: 4px;height: 308px;padding: 40px;}
        .service ul .name{font-size: 20px;color: #c6944e;margin-right: 10px;}
        .service ul .job{font-size: 14px;color: #c6944e;}
        .service ul .txt{color: #c6944e;margin: 28px 0;}
        .a-wrap{margin-bottom: 60px;clear: both;}
        .view-more{font-size:16px;margin: 0 auto;width: 170px;height: 42px;line-height: 42px;text-align: center;color: #c6944e;border: 1px solid #c6944e;border-radius: 20px;display: block}
        
         .view-more:hover{color: #fff;background: #c6944f;border: 1px solid #c6944f;}
        
        .join{clear:both;padding-top: 40px;overflow: hidden;padding-bottom: 45px;}
        .join-inner{margin-top: 50px;}
        .join-inner ul{background: #f5f5f5;}
        .join ul {position:relative;width:230px;height:308px;padding: 25px; }
        .join ul li{line-height: 32px;position: relative;}
        .join ul li.active{color: red;}
        .join .require{background: #f5f5f5;border-radius: 4px;height: 308px;padding: 40px;margin-left: 20px;}
        .down{position: absolute;bottom: 10px;left: 10px;}
        .join-inner .dot{width: 4px;height: 4px;border-radius: 4px;background: #000000;display: inline-block;
            position: relative;  top:-2px;margin-right: 4px;}
        .join ul li.active .dot{background: red;}
        .menu-wrap{    position: relative;}
        
		.menu{position: absolute;z-index: 23;padding-top:12px;display:none;}
		.business-wrap{position: absolute;left:175px;top:11px;height:432px;}
</style>
</head>
<body class="">
<div id='app' >
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="container menu-wrap wrap-box">
		<ul class="menu">
			<cms:ad var="items" code="ywfl"></cms:ad>
			<c:forEach var="item" items="${items }">
				<li  @mouseover="selectAd('${item.adUrl }')"><a href="${item.adUrl }" target="blank"><img
						src="${item.adImg }" alt="">${item.adTitle }</a></li>
			</c:forEach>
		</ul>
		<div class="business-wrap">
           <div class="business-list" v-for="item in ads">
               <div class="img-box"><img :src="item.adImg" alt=""></div>
               <div>
                   <h4><a href="">{{item.adTitle}}</a></h4>
                   <div class="business-list-link">
                      {{item.adInfo1}}
                   </div>
                   <div class="btns"><a :href="item.adUrl">在线咨询</a><a target="blank" :href="item.adUrl">查看详情</a></div>
               </div>
           </div>
       </div>
	
	</div>
	<div class="banner">
		<cms:ad var="banner" code="gywmbanner" multi="false"></cms:ad>
		<img src="${banner.adImg}" alt="">
	</div>
	<cms:ad var="js" code="gywmjs" multi="false"></cms:ad>
	 <div class="container">
        <div class="company-info" >
            <div class="left">
                <h3>${js.adTitle }</h3>
                <h4>${js.adInfo1 }</h4>
                <div class="line"></div>
                <div>${js.adInfo2 } </div>
            </div>
            <div class="right">
                <img src="${js.adImg }" alt="">
            </div>
        </div>
    </div>
    
    <div class="gray-bg">
        <div class="container service">
            <h3 class="text-center">我们的团队</h3>
            <h3 class="en-tit"><span class="line"></span>service<span class="line2"></span></h3>
            <ul id="mans" >
               <cms:ad var="items" code="wmdtdgywm"></cms:ad>
				<c:forEach var="item" items="${items }">
				<li class="row" style="display: none;">
                    <div class="col-md-3">
                        <div class="img-wrap"><img src="${item.adImg }" alt=""></div>
                    </div>
                    <div class="col-md-9">
                        <div class="per-info">
                            <span class="name">${item.adTitle }</span>
                            <span class="job">${item.adInfo1 }</span>
                            <p class="txt">${item.adInfo2 }</p>
                            <p class="txt2">${item.adInfo3 }</p>
                        </div>
                    </div>
                </li>
				</c:forEach>
            </ul>
            <div class="a-wrap">
                <a href="javascript:void(0)" class="view-more " onclick="show()">查看更多</a>
            </div>
        </div>
    </div>
        <div class="container join" >
            <h3 class="text-center">加入我们</h3>
            <h3 class="en-tit"><span class="line"></span>join us<span class="line2"></span></h3>
            <div class="join-inner">
            <div class="row">
                <div class="col-md-3">
                    <ul class="inside">
                        <li v-for="art in arts" @click="changeCurrent(art.artId)" ><span class="dot"></span>{{art.artTitle}}</li>
                    </ul>
                    <a href="" class="down">
                        <img src="${path }/resource/images/down.png" alt="">
                    </a>
                </div>
                <div class="col-md-9">
                    <div class="require" v-html="current.artContent" >
                      
                    </div>
                </div>
                </div>
            </div>
    </div>
    </div>
		<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/visitor/index.js"></script>
<script>
var lis=$("#mans").find("li");
for(var i=0;i<lis.length;i++){
	if(i<3){
		lis.eq(i).show();
	}
}

function show(){
	$("#mans").find("li").show();
}
	var app = new Vue({
		el : '#app',
		data : {
			offset : 0,
			current:{},
			limit : 4,
			arts : [],
			ads:[],
			code : 'jrwm', // 默认企业动态
		},
		filters : {
			getYear : function(value) {
				var data = new Date(value);
				return data.getFullYear();
			}
		},
		methods : {
			selectAd:function(code){
				$.AjaxProxy({
					c : false,
					p : {
						"code" : code
					}
				}).invoke("${path}/findAd", function(loj) {
					app.ads = loj.getValue("rows");
				});
			},
			toArticle : function(id) {
				window.open("${path}/redirect/serviceDetails?id=" + id);
			},
			loadArt : function() {
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : app.offset,
						"limit" : app.limit,
						"code" : app.code
					}
				}).invoke("${path}/findNews", function(loj) {
					app.arts = loj.getValue("rows");
					console.log(1);
					app.current=app.arts[0];
				});
			},
			changeCurrent:function(artId){
				$.AjaxProxy({
					c : false,
					p : {
						"artId" : artId
					}
				}).invoke("${path}/findNews", function(loj) {
					app.current=loj.getValue("rows")[0];
					console.log(app.current.artTitle);
				});
			}
		
		},
	});
	app.loadArt();
    

</script>

</body>
</html>
